// Copyright (c) Microsoft. All rights reserved.

@import 'src/styles/mixins';
@import 'src/styles/themes';

.analytics-panel-container {
  display: flex;
  flex-flow: row wrap;
  height: 100%;

  .analytics-cell {
    display: flex;
    flex-flow: column nowrap;
    width: 50%;
    height: 50%;

    &.full-width { width: 100%; }

    .critical-alerts {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-grow: 1;
      font-family: $fontSelawikLight;
      @include rem-font-size(60px);

      .analytics-percentage-container {
        display: flex;
        align-items: flex-end;

        .analytics-percentage-sign { @include rem-font-size(40px); }
      }
    }
  }

  .chart-container {
    flex-grow: 1;
    align-items: center;
    justify-content: center;
  }

  @include themify($themes) {
    // Overrides of the TSIChart Lib
    text { fill: themed('colorContentText'); }

    .tsi-barChart {
      background: transparent;

      text { fill: themed('colorContentText') !important; }
    }
    .tsi-pieChart {
      background: transparent;

      .tsi-pieChartSVG path { stroke: themed('colorDashboardPanelContentBg'); }
    }

    .analytics-cell {
      .analytics-header { color: themed('colorContentTextDim'); }

      .critical-alerts {
        .analytics-header { color: themed('colorContentText'); }
      }
    }
  }
}
